<template>

    <div class="invoice-home">
        <div class="show-line">
            <div class="line"></div>
            <div class="label">发票基本信息</div>
        </div>
        <el-row :gutter="80">
            <el-col :span="8">
                <div class="invoice-amount">
                    <div class="content">
                        <div class="headline">可索取发票金额</div>
                        <div class="striping"></div>
                        <div class="price">￥{{realsumPrices}}</div>
                        <div class="standby"></div>
                        <el-button class="btn" @click="changeNodule('requst')">索取发票</el-button>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="invoice-info">
                    <div class="content">
                        <div class="headline">发票信息</div>
                        <div class="striping"></div>
                        <div class="price">默认抬头：{{defaultInvoiceInfo.invoiceTitle}}</div>
                        <div class="standby">开具类型：{{defaultInvoiceInfo.makeInvoice==2?'企业':'个人'}}</div>
                        <el-button class="btn" @click="changeNodule('info')">管理发票信息</el-button>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="invoice-addr">
                    <div class="content">
                        <div class="headline">默认寄送地址</div>
                        <div class="striping"></div>
                        <div class="price">{{defaultAddr.recipients}}<span style="margin: 0px 40px">{{defaultAddr.phone}}</span></div>
                        <div class="standby">{{defaultAddr.province}}{{defaultAddr.city}}{{defaultAddr.district}}{{defaultAddr.detileAddress}}</div>
                        <el-button class="btn" @click="changeNodule('addr')">管理发票寄送地址</el-button>
                    </div>
                </div>
            </el-col>
        </el-row>

        <div class="show-line margin-top30">
            <div class="line"></div>
            <div class="label">获取发票记录</div>
        </div>
        <div class="margin-top20">
            <label>查询时间：</label>
            <el-date-picker
                    @change="searchDateChange()"
                    placeholder="选择查询日期"
                    v-model="sectionDate"
                    value-format="yyyy-MM-dd"
                    type="date">
            </el-date-picker>
        </div>
        <div class="margin-top20">
            <el-table :data="invoiceData" height="350" border style="width: 100%">
                <el-table-column align="center" prop="timeOfApplication" label="申请时间" width="180"></el-table-column>
                <el-table-column align="center" label="抬头类型" width="180">
                    <template slot-scope="scope">
                       {{scope.row.makeInvoice==1?'个人':'企业'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="invoiceTitle" label="发票抬头"></el-table-column>
                <el-table-column align="center" prop="invoicePrice" label="发票总额"></el-table-column>
                <el-table-column align="center" prop="remark" label="发票备注"></el-table-column>
                <el-table-column align="center" prop="invoiceType" label="发票类型" width="300"></el-table-column>
                <el-table-column align="center" label="发票状态" sortable>
                    <template slot-scope="scope">
                        <span>{{getStatusLabel(scope.row.status)}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" fixed="right" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" style="color: red" @click="showDeleteDialog(scope.row.id)">删除
                        </el-button>
                        <el-button v-if="scope.row.status==3" type="text" size="small"
                                   @click="rejectReasonDialogVisible=true">查看物流
                        </el-button>
                        <el-button type="text" size="small" v-if="scope.row.status==2" @click="handleReapply(scope.row.id)">重新申请</el-button>
                        <el-button type="text" size="small" v-if="scope.row.status==2"
                                   @click="logisticsDialogVisible=true,rejectReason=scope.row.turnDown">驳回原因
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--        分页-->
        <div align="center">
            <Pagination
                    v-if="total>0"
                    :total="total"
                    :page.sync="page"
                    :limit="size"
                    @pagination="handlePageChange"
            ></Pagination>
        </div>

        <!--        dialog-->
        <!--        删除提示弹窗-->
        <el-dialog :visible.sync="deleteDialogVisible" width="300px" center :modal="false" top="40vh">
            <div align="center"><span>确定删除该发票信息吗？</span></div>
            <span slot="footer" class="dialog-footer">
                <el-button type="danger" @click="handleDeleteInvoice">确 定</el-button>
                <el-button @click="deleteDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
        <!--        驳回原因提示弹窗-->
        <el-dialog custom-class="reject" title="发票驳回原因" :visible.sync="logisticsDialogVisible" width="400px" :modal="false" top="40vh"
                   class="dialog" >
            <span>{{rejectReason}}</span>
        </el-dialog>
        <!--        显示物流提示弹窗-->
        <el-dialog :visible.sync="rejectReasonDialogVisible" width="400px" :modal="false" top="40vh">
            <el-form ref="form" label-width="100px">
                <el-form-item label="快递：">
                    <el-input v-model="testText"></el-input>
                </el-form-item>
                <el-form-item label="快递单号：">
                    <el-input v-model="testText"></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>

</template>

<script src="./invoice.home.js"></script>
<style lang="scss" src="./invoice.home.scss"></style>
